<template>
  <div class="page">
    <div class="path"><span class="level-1">佣金管理</span> > <span class="level-2">佣金管理列表</span></div>
    <div class="mods">
      <div class="mod-1">
        <span class="name">总佣金：</span><span class="num">{{info.income || '0.00'}}</span>
      </div>
      <div class="mod-1">
        <span class="name">已提现佣金：</span><span class="num">{{info.drawMoney || '0.00'}}</span>
      </div>
      <div class="mod-1">
        <span class="name">剩余佣金：</span><span class="num">{{info.commission || '0.00'}}</span>
      </div>
      <div class="mod-2">
        <span class="name">今日预估佣金：</span><span class="num">{{info.todayComission || '0.00'}}</span>
      </div>
    </div>
    <div class="search">
      <div>
        <span>开始时间：</span>
        <DatePicker type="date" v-model="params.start_time" placeholder="开始时间"/>
      </div>
      <div>
        <span>结束时间：</span>
        <DatePicker type="date" v-model="params.end_time" placeholder="结束时间"/>
      </div>
      <div class="btns">
        <Button type="primary" @click="query">查询</Button>
        <Button @click="reset">重置</Button>
      </div>
    </div>
    <DataList class="data-list"
              id="data-list"
              :dataHeight="dataHeight"
              :columns="columns"
              :data="data"
              :total='total'
              :pageSize="pageSize"
              @pageChange="getData"></DataList>
  </div>
</template>
<script>
import DataList from './DataList'
import {listCommission} from '@/api/api-list'
export default {
  name: 'order',
  data () {
    return {
      columns: [
        {
          title: '工单ID',
          key: 'id',
          width: 80
        },
        {
          title: '提现金额',
          key: 'money',
          width: 180
        },
        {
          title: '提现后金额',
          key: 'cash',
          width: 180
        },
        {
          title: '提现时间',
          key: 'create_time',
          width: 180
        },
        {
          title: '备注',
          key: 'remarks'
        }
      ],
      data: [],
      params: {
        start_time: '', // 开始时间
        end_time: '' // 结束时间
      },
      total: 0,
      pageSize: 10,
      dataHeight: 0,

      info: {
        count: 0,
        refunds: 0
      },
    }
  },
  components: {DataList},
  mounted () {
    this.getData(1)
    this.dataHeight = document.getElementById('data-list').clientHeight
  },
  methods: {
    getData (page) {
      listCommission({...this.params, p: page}).then(({data}) => {
        this.data = data ? data.list : []
        this.total = data.total || 0
        this.pageSize = data.pageSize
        this.info = data.info || {}
      })
    },
    query () {
      this.getData(1)
    },
    reset () {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.getData(1)
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/page";
</style>
